/* ==========================================================================
    Index
   ========================================================================== */

@import 'reset';
@import 'helper';
@import 'px-to-rem';

body{
    font: 12px/1.5 tahoma,arial,Hiragino Sans GB,WenQuanYi Micro Hei,'\5FAE\8F6F\96C5\9ED1','\5B8B\4F53',sans-serif;
    color: #333;
    -webkit-font-smoothing: antialiased;
    min-width: 320px;
    -webkit-text-size-adjust: 100%;
    -webkit-overflow-scrolling: touch;
}

input{
    border: none;
}

a{
    color: #333;
}

// 引导下载条
.g-download-guide {
    position: fixed;
    z-index: 110;
    left: 0;
    right: 0; 
    top: 0;
    background: rgba(0,0,0,.4);
    padding: px2rem(10px 38px 10px 28px);
    display: block!important;
}

.m-app-info {
    color: #fff;

    .logo {
        display: inline-block;
        width: px2rem(80px);
        height: px2rem(80px);
        vertical-align: middle;
        margin-right: px2rem(18px);
    }

    .info {
        display: inline-block;
        vertical-align: middle;
    }

    .name {
        @include font-dpr(14px);
    }
}

.u-download-btn {
    @include font-dpr(14px);
    float: right;
    width: px2rem(186px);
    line-height: px2rem(60px);
    border: px2rem(2px) solid rgb(254,224,102);
    background: rgba(254,224,102,0.4);
    border-radius: px2rem(8px);
    text-align: center;
    color: #fff;
    margin-top: px2rem(10px);
}

// 页面loading
.g-loading {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;

    &:before {
        position: absolute;
        z-index:100;
        left: 50%;
        top: 50%;
        z-index: 100;
        transform: translate(-50%,-50%);
        border-radius: px2rem(44px);
        content: '';
        width: px2rem(270px);
        padding-top: px2rem(270px);
        background: rgba(0,0,0,.6) url(../../base/images/loading.gif) center top no-repeat;
        background-size: 100% 100%;
    }
}

// 分享按钮
.u-page-share-btn {
    position: absolute;
    z-index: 90;
    right: px2rem(30px);
    top: px2rem(30px);
    width: px2rem(42px);
    height: px2rem(42px);
    background: url(../../base/images/icon-share.png) center center no-repeat;
    background-size: 100% 100%;
}

// 分享遮罩
.g-wx-share-mask {
    position: fixed;
    z-index: 999;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,.6);
    display: none;
}

.g-wx-share-mask:before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../../base/images/open-native.png) center top no-repeat;
    background-size: 100% auto;
}

.g-wx-share-mask.on {
    display: block;
}



/* 提示信息 */
.xt-message{
    position: fixed;
    z-index: 300;
    display: none;
}
.xt-message,
.xt-message.backdrop:after{
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}
.xt-message.backdrop:after{
    content: '';
    position: absolute;
    background-color: rgba(0, 0, 0, .5);
}
.xt-message-cnt{
    position: absolute;
    z-index: 2;
    background-color: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    padding: px2rem(20px) px2rem(24px);
    text-align: center;
    word-break: break-word;
    display: inline;
    max-width: 80%;
}

.fadeToOut .xt-message-cnt{
    animation: fadeToOut 3s ease-out forwards;
}

@keyframes fadeToOut{
    0%{
        transform: translate(px2rem(-20px), 0);
        opacity:1;
    }
    5%{
        transform: translate(px2rem(16px), 0);
        opacity:1;
    }
    10%{
        transform: translate(px2rem(-6px), 0);
        opacity:1;
    }
    15%{
        transform: translate(0px, 0);
        opacity:1;
    }
    55%{
        transform: translateY(0);
        opacity:1;
    }
    100%{
        transform: translateY(px2rem(-400px));
        opacity:0;
    }
}